<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!--<link rel="stylesheet" href="../mycss/main.css"/>-->
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" media="screen"/>

    <link rel="stylesheet" href="../bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
          media="screen"/>
    <script src="../jquery/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <script src="../bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script src="../bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../js/Jpanda.js"></script>
    <title>租房系统</title>
</head>

<body>
<!--引用页面头部-->
<!--<script>-->
    <!--$(document).ready(function(){-->
        <!--initHeader()-->
    <!--});-->
<!--</script>-->
<!--<div class="panda-header" style="height:55px">-->
<!--</div>-->
<div th:include="header :: header"></div>
<!--<div th:include="header :: '@{http://111.230.107.192:8082/header}'"></div>-->
<div class="row">
    <div class="col-md-12">
        <div id="myCarousel" style="width:100%" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="../static/imgs/ChAFD1ob1gyAPnEiAARe1QPIHdg475.jpg" alt="First slide" />
                </div>
                <div class="item">
                    <img src="../static/imgs/ChAFD1qOcv-Af5rWAAaxDtEftCA559.jpg" alt="First slide" />
                </div>
                <div class="item">
                    <img src="../static/imgs/ChAFfVph2h2AGdKKAApvRjK7dPs812.png" alt="First slide" />
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

<p></p>
<p></p>
<!--筛选条件-->
<div class="panel panel-default container">
    <div class="panel-heading row">
        <div class="input-group col-md-4">
            <input type="text" class="form-control" />
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>搜索
                </button>
            </span>
        </div><!-- /input-group -->
    </div>
    <div class="panel-body" >
        <div class="row" >
            <b>租金：</b>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio" name="options" id="option1"/> 1000元以下
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option2"/> 1000~3000元
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option3"/> 3000~5000元
                </label>
            </div>
        </div>
        <div class="row" style="" >
            <b>居室：</b>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio" name="options" id="option1"/> 1居
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option2"/> 2居
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option3"/> 3居
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option3"/> 4居
                </label>
            </div>
        </div>
        <div class="row">
            <b>面积：</b>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio" name="options" id="option1"/> 40m²
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option2"/> 40~60m²
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option3"/> 60~80m²
                </label>
                <label class="btn">
                    <input type="radio" name="options" id="option3"/> 80~100m²
                </label>
            </div>
        </div>
    </div>
</div>
<!--筛选条件-->

<div class="panel panel-default container">
    <div class="panel-heading row">
        <div class="btn-group">
            <button type="button" class="btn btn-default">默认排序 </button>
            <button type="button" class="btn btn-default">价格</button>
            <button type="button" class="btn btn-default">面积</button>
        </div>
    </div>
    <div class="panel-body">
        <div class="row" style="border-bottom: 1px solid #ddd; padding: 10px;margin: 2px" th:if="${houseList}" th:each="house:${houseList}">
            <div class="col-md-4">
                <a class="thumbnail" th:href="@{/showHouse(houseId=${house.id})}">
                    <img th:src="${house.images}" alt="紫东芯座"/>
                </a>
            </div>
            <div class="col-md-4">
                <h3>
                    <a th:href="@{/showHouse(houseId=${house.id})}" class="t1" th:if="${house.communityName}" th:text="${house.communityName}"></a>
                </h3>
                <h4>
                    <a th:href="@{/showHouse(houseId=${house.id})}">[成华万象城] 4号线万年场</a>
                </h4>
                <div class="detail">
                    <p>
                        <span th:text="${house.area}"></span>
                        |“
                        <span>20/33层</span>
                        ”
                        <span th:text="${house.houseType}">3室1厅</span>
                    </p>
                    <p>
                        <span>距4号线万年场站632米</span>
                    </p>
                    <p class="leave">有2间空房</p>
                </div>
                <p class="room_tags clearfix">
                    <span class="subway"></span>
                    <span class="balcony"></span>
                    <a href="" target="_blank">
                        <span class="style">友家4.0木棉</span>
                    </a>
                </p>
            </div>
            <div class="col-md-4">
                <p class="price">
                    <label th:text="${house.price}" style="color:sandybrown;font: bold 35px arial,sans-serif"> </label>
                </p>
                <p class="more">
                    <button type="button" class="btn btn-lg btn-block btn-default">查看更多</button>
                </p>
            </div>
        </div>
    </div>
    <div class="panel-footer"></div>
</div>

</body>
</html>